<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js分页功能</title>
<meta content="" name="description">
<script type="text/javascript" src="/j-tool/jquery.js"></script>
<style>
	#page li{color:gray;float:left;list-style:none;font-size:14px;line-height:20px;background:#ccc;border:1px solid green;width:17px;text-align:center;margin:0 2px;cursor: pointer;}
	#page li:hover{color:black;background:white;}
	#page ul{height: 22px;width:150px;margin:0 auto;padding:0;}
	#page .on{color:black;background:#CCFFFF;}
</style>
<body>
	<div id="page" style="margin-top: 200px;">
		<ul>
			<li class="on" onclick="page(1)">1</li>
			<li onclick="page(2)">2</li>
			<li onclick="page(3)">3</li>
			<li onclick="page(4)">4</li>
		</ul>
	</div>
</body>
<script>
	var total = 10;
	function page(numb)
	{
		var html = "";
		
		if(numb > 2)
		{
			html += '<li onclick="page(1)">1</li>';
		}
		
		if(numb >= 4)
		{
			html += '<li style="background:white;border:0;margin:0;">…</li>';
		}

		if(numb > 1)
		{
			html += '<li onclick="page('+(numb-1)+')">'+(numb-1)+'</li>';
		}
		
		html += '<li class="on" onclick="page('+numb+')">'+numb+'</li>';
		
		if(numb < total-2)
		{
			html += '<li onclick="page('+(numb+1)+')">'+(numb+1)+'</li><li style="background:white;border:0;margin:0;">…</li>';
		}

		if(numb == total-2)
		{
			html += '<li onclick="page('+(numb+1)+')">'+(numb+1)+'</li>';
		}

		if(numb != total)
		{
			html += '<li onclick="page('+total+')">'+total+'</li>';
		}

		$('#page > ul').html(html);
	}
</script>
</html>